<template>
  <div class="hello">
    
    <h1>dayjs示例</h1>
    {{ date }}<br />
    <h1>多语言示例</h1>
    <button @click="switchLang">{{ switchLangTxt }}</button>
    {{ $t("msg.msg_welcome") }}
    <h1>SCSS示例</h1>
    <div class="main">
      测试scss
      <div class="hello">嵌套scss</div>
    </div>
    <h1>Vuex示例</h1>
    <div>
      {{ count }}
    </div>
    增加count <button @click="$store.commit('add')">+ add</button> <br />
    减少count <button @click="$store.commit('minus')">- minus</button> <br />
    增加count Action<button @click="addAction()">+ add</button> <br />
    减少count Action<button @click="reduceAction()">- minus</button> <br />

    <h1>Router示例</h1>
    <router-link to="/">首页</router-link>
    <router-link to="/TestRouter">测试Router</router-link>

    <router-link :to="{ name: 'TestRouter1', params: { username: 'Joe' } }"
      >测试Router1</router-link
    >
    <router-link :to="{ name: 'TestRouter2', params: { username: 'Loyd' } }"
      >测试Router2</router-link
    >
    <router-link to="params/233/joe">链接传参</router-link>
    <router-link to="/GoParams/344/loyd">重定向首页</router-link>
    <router-link to="Hi">Hi</router-link>
    <router-link to="joe">别名</router-link>
    <div>
      <comments-message></comments-message>
    </div>
    <div>
      <shop-cart></shop-cart>
    </div>
    <div>
      <element-table-sample></element-table-sample>
    </div>
    <div>
      <embeded-table></embeded-table>
    </div>
    <div v-html="testHtml">Test</div>
  </div>
</template>

<script>
import dayjs from "dayjs";
//引入store
import store from "../stores/store.js";
// 组件中导入mapGetters
import { mapGetters, mapActions } from "vuex";

import CommentsMessage from "@/components/comments/CommentsMessage";
import ShopCart from "@/components/ShopCart";
import ElementTableSample from "@/components/ElementTableSample";
import EmbededTable from "@/components/EmbededTable";


export default {
  //   项目使用keep-alive时，可搭配组件name进行缓存过滤
  // DOM做递归组件时需要调用自身name
  // vue-devtools调试工具里显示的组见名称是由vue中组件name决定的
  name: "HelloWorld",
  //使用
  store,
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      date: "",
      switchLangTxt: "中",
      isEng: false,
      testHtml: 'test1<br>test2'
      // count: this.$store.state.count
    };
  },
  components: {
    "comments-message": CommentsMessage,
    "shop-cart": ShopCart,
    "element-table-sample": ElementTableSample,
    "embeded-table": EmbededTable,
  },

  // 在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素
  // 而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点，（此时document.getelementById 即可生效了）。
  // （created里面的请求是异步的）
  mounted() {
    //dayjs用法
    this.date = dayjs().format("YYYY-MM-DD dddd HH:mm:ss.SSS A");
    //2021-07-06 Tuesday 10:23:53.492 AM
  },
  //store可以通过computed来调取
  computed: {
    // count(){
    //   return this.$store.state.count;
    // }
    ...mapGetters(["count"]),
  },
  methods: {
    ...mapActions(["addAction", "reduceAction"]),
    switchLang() {
      //默认是中文
      this.isEng = !this.isEng;

      //通过$i18n.locale来切换
      if (this.isEng) {
        this.$i18n.locale = "en";
        this.switchLangTxt = "英";
      } else {
        this.$i18n.locale = "zh";
        this.switchLangTxt = "中";
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- 设置lang="scss" 使用scss -->
<style lang="scss" scoped>
// 使用$符号去声明一个变量
$base-color: red;
$side: bottom;
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
// Mixin是可以重用的代码块。使用@mixin命令，定义一个代码块，使用@include命令，调用这个mixin。
@mixin myCSS($myColor: blue) {
  color: $myColor;
  background-color: $myColor;
}
.main {
  @include myCSS(yellow);
  color: $base-color;
  // 如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中
  border-#{$side}: 1px solid blue;
  // 嵌套
  .hello {
    font-size: 30px;
    // 在嵌套的代码块内，可以使用&引用父元素。
    &:hover {
      color: green;
    }
  }
}
</style>
